<template>
  <div>
    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">
      <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
      <el-row :gutter="20">
        <el-col :span="9">
          <!-- 3.定义搜索框 -->
          <el-input placeholder="请输入用户名" v-model="queryInfo.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户数据表格展现  border 边框线属性  -->
      <el-table :data="userList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="userName" label="用户名">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.userName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="success">{{ scope.row.nickName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="warning">{{ scope.row.email==null?'无':scope.row.email }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="启停用户" width="80px">
          <template slot-scope="scope">
            <!-- active-value打开时对应的值  inactive-value关闭时对应的值-->
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="updateStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="用户禁言" width="80px">
          <template slot-scope="scope">
            <!-- active-value打开时对应的值  inactive-value关闭时对应的值-->
            <el-switch
              v-model="scope.row.commentStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="updateCommentStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="resetUserPasswordBtn(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 定义分页组件 关于分页插件的属性说明
            1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
            2.@current-change 当页数发生改变时,触发该函数
            3.current-page 当前选中的页
            4.page-sizes   页面数据展现的选项
            5.page-size    默认选中的页数
            6.layout    分页中展现的数据种类
            7.total     记录总数
      -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 重置密码对话框 visible.sync 控制对话框的显示-->
    <el-dialog title="重置密码" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <!-- 定义分类提交表单数据-->
      <el-form
        :model="resetUserPasswordModel"
        :rules="rules"
        ref="resetUserPassword"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="新的密码" prop="passWord">
          <el-input v-model="resetUserPasswordModel.passWord" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="passWord2">
          <el-input v-model="resetUserPasswordModel.passWord2" type="password"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetUserPassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    const checkPassword = (rule, value, callback) => {
      if (this.resetUserPasswordModel.passWord !== value) return callback(new Error('2次密码输入不一致'))
      //否则校验成功
      callback()
    }
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      userList: [],
      //记录总数是数值类型
      total: 0,
      dialogVisible: false,
      //数据校验规则
      rules: {
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        passWord2: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
          { validator: checkPassword, trigger: 'blur' }
        ]
      },
      updateDialogVisible: false,
      resetUserPasswordModel: {
        uid: '',
        passWord: '',
        passWord2: ''
      },
    }

  },
  methods: {
    async getUserList() {
      const { data: result } = await this.$http.get('/user/getList', {
        params: this.queryInfo
      })
      if (result.status !== 200) return this.$message.error("用户列表查询失败")
      this.userList = result.data.rows
      this.total = result.data.total
      console.log("总记录数:" + this.total)
    },
    async updateStatus(user) {
      var us = {
        status: user.status,
        uid: user.uid
      }
      const { data: result } = await this.$http.post(`/user/updateStatus/`, us)
      if (result.status !== 200) return this.$message.error("用户状态修改失败!")
      this.$message.success("用户状态修改成功!")
    },
    async updateCommentStatus(user) {
      var us = {
        commentStatus: user.commentStatus,
        uid: user.uid
      }
      const { data: result} = await this.$http.post(`/user/updateCommentStatus`, us)
      if (result.status !== 200) return this.$message.error("禁言状态修改失败!")
      this.$message.success("禁言状态修改成功!")
    },
    resetUserPasswordBtn(user) {
      this.dialogVisible = true
      console.log(user.uid)
      this.resetUserPasswordModel.uid = user.uid
    },
    async resetUserPassword() {
      const { data: result } = await this.$http.post(`/user/resetUserPassword/`, this.resetUserPasswordModel)
      if (result.status !== 200) return this.$message.error("重置密码失败!")
      this.$message.success("重置密码成功!")
      this.closeDialog()
      this.dialogVisible = false
    },
    handleSizeChange(pageSize) {
      //console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getUserList()
    },
    handleCurrentChange(pageNum) {
      //console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getUserList()
    },
    closeDialog() {
      //重置表格数据
      this.$refs.resetUserPassword.resetFields()
    }
  },
  //利用钩子函数实现数据查询
  mounted() {
    this.getUserList()
  }
}
</script>


<style lang="less" scoped>
</style>
